<!--订单管理-->
<template>
  <div>
    <div class="inquire">
      <span style="margin-right: 12px"> {{ $t('mall.status') }}</span>
      <el-select
        v-model="data.orderReview"
        :placeholder="$t('mall.refund_review_status')"
        size="default"
        clearable
        style="width: 200px; margin-right: 12px"
      >
        <el-option
          v-for="item in data.orderReviewStatusOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <el-input
        v-model="data.serial"
        :placeholder="$t('mall.enter_refund_number')"
        style="width: 180px; margin-right: 12px"
      />
      <span style="margin-right: 12px"> {{ $t('mall.creation_date') }}</span>
      <el-date-picker
        v-model="dateRange"
        value-format="YYYY-MM-DD"
        type="daterange"
        range-separator="-"
        :start-placeholder="$t('om.Startdate')"
        :end-placeholder="$t('om.Enddate')"
      ></el-date-picker>

      <el-button class="m-l-15" type="primary" @click="handleQuery">{{
        $t('om.Search')
      }}</el-button>
      <el-button class="m-l-15" @click="handleReset">{{ $t('mall.reset') }}</el-button>
    </div>
    <el-table :data="data.list" border>
      <el-table-column
        prop="serial"
        :label="$t('mall.refund_number')"
        show-overflow-tooltip
        width="180"
      />
      <el-table-column prop="createTime" :label="$t('mall.application_time')" width="150" />
      <el-table-column prop="businessType" :label="$t('mall.order_type')" width="120">
        <template #default="scope">
          {{ formatBusinessType(scope.row.businessType) }}
        </template>
      </el-table-column>
      <el-table-column prop="payCurrencyTaxAmount" :label="$t('mall.refund_amount')" width="140">
        <template #default="scope">
          {{ `${scope.row.payCurrencyTaxAmount}` }}
        </template>
      </el-table-column>
      <el-table-column prop="updateTime" :label="$t('mall.refund_time')">
        <template #default="scope">
          {{ scope.row.updateTime || '--' }}
        </template>
      </el-table-column>
      <el-table-column
        prop="remark"
        :label="$t('mall.refund_reason')"
        show-overflow-tooltip
        width="200"
      >
        <template #default="scope">
          {{ scope.row.remark || '--' }}
        </template>
      </el-table-column>
      <el-table-column prop="orderReview" :label="$t('mall.status')" :width="100">
        <template #default="scope">
          {{ formatStatusType(scope.row) }}
        </template>
      </el-table-column>
      <el-table-column fixed="right" :label="$t('coommon.operation')" width="100">
        <template #default="scope">
          <template v-if="[1, 2].includes(scope.row.orderReview)">
            <el-button size="small" type="warning" @click="handleCancel(scope.row)">{{
              $t('smt.Cancel')
            }}</el-button>
          </template>
          <template v-if="[4, 5].includes(scope.row.orderReview)">
            <el-button size="small" type="danger" @click="handleDelete(scope.row)">
              {{ $t('smt.Deleting') }}</el-button
            >
          </template>
        </template>
      </el-table-column>
    </el-table>
    <Pagination
      class="right-align"
      v-show="data.total > 0"
      :total="data.total"
      v-model:page="data.pageNumber"
      v-model:limit="data.pageSize"
      @pagination="handlePaginationChange"
    />
  </div>
</template>
<script setup>
import { ref, reactive, onMounted, computed } from 'vue';
import { ElMessageBox } from 'element-plus';
import Table from '@/components/Table/index.vue';
import {
  queryOmsMallPaymentRefundOrderPageList,
  getDictList,
  cancelOmsMallPaymentRefundOrder,
  deleteOmsMallPaymentRefundOrder,
} from '@/server/api/biz.js';
import Pagination from '@/components/Pagination/index.vue';
import { useRouter } from 'vue-router';
import { ElMessage, formatter } from 'element-plus';
import { useI18n } from 'vue-i18n';
const { t } = useI18n();
const emit = defineEmits(['getRuoterInfo']);
const router = useRouter();
const dateRange = ref([]);
const data = reactive({
  startDate: '',
  endDate: '',
  orderType: '',
  orderReview: '',
  list: [],
  total: 0,
  pageNum: 1,
  pageSize: 10,
  dialogVisible: false,
  orderTypeOptions: [],
  orderReviewStatusOptions: [
    { label: t('mall.under_review'), value: 1 },
    { label: t('mall.processing_refund'), value: 2 },
    { label: t('mall.refunded'), value: 3 },
    { label: t('mall.cancelled'), value: 4 },
    { label: t('mall.rejected'), value: 5 },
  ],
  orderProgressOptions: [],
  progressStatus: 0,
  progressDialogVisible: false,
  orderId: 0,
  pcbVisible: false,
  smtVisible: false,
  smtInfo: {},
  pcbInfo: {},
});

/**
 * 获取列表数据
 * @param {*} page
 * @param {*} limit
 */
const getList = (page = 1, limit = 10) => {
  const [startTime = '', endTime = ''] = dateRange.value || [];
  queryOmsMallPaymentRefundOrderPageList({
    serial: data.serial,
    endTime: endTime ? `${endTime} 23:59:59` : '',
    startTime: startTime ? `${startTime} 00:00:00` : '',
    orderReview: data.orderReview,
    limit: limit,
    page: page,
  }).then((res) => {
    if (res.code === 200) {
      data.list = res.data.list;
      data.total = res.data.totalRow;
      data.pageNum = res.data.pageNumber;
      data.pageSize = res.data.pageSize;
    }
  });
};

onMounted(() => {
  getList();
  getDict();
});

// 业务类型
const formatBusinessType = (value) => {
  const statusMap = {
    1: 'PCB',
    2: 'PCBA',
    3: t('mall.group_package'),
  };
  return statusMap[value] || '--';
};

// 退款审核状态 1审核中，2退款中，3已退款，4已取消，5已拒绝
const formatStatusType = ({ orderReview: value, reviewReason = '' }) => {
  const statusMap = {
    1: t('mall.under_review'),
    2: t('mall.processing_refund'),
    3: t('mall.refunded'),
    4: t('mall.cancelled'),
    5: `${t('mall.rejected')}(${reviewReason})`,
  };
  return statusMap[value] || '--';
};

// 取消
const handleCancel = (row) => {
  ElMessageBox.confirm(t('mall.confirm_cancel'), t('coommon.tips'), {
    confirmButtonText: t('smt.Define'),
    cancelButtonText: t('smt.Cancel'),
    type: 'warning',
  })
    .then(() => {
      cancelOmsMallPaymentRefundOrder(row.id).then((res) => {
        if (res.code === 200) {
          ElMessage.success(res.msg);
          getList();
        }
      });
    })
    .catch(() => {});
};

// 删除
const handleDelete = (row) => {
  ElMessageBox.confirm(t('mall.confirm_delete'), t('coommon.tips'), {
    confirmButtonText: t('smt.Define'),
    cancelButtonText: t('smt.Cancel'),
    type: 'warning',
  })
    .then(() => {
      deleteOmsMallPaymentRefundOrder(row.id).then((res) => {
        if (res.code === 200) {
          ElMessage.success(t('mall.delete_successful'));
          getList();
        }
      });
    })
    .catch(() => {});
};

/**
 * 获取字典状态列表
 */
const getDict = () => {
  getDictList().then((res) => {
    if (res.code === 200) {
      data.orderStatusObj = res.data.orderStatus;
      data.orderTypeOptions = setObjectToArray(res.data.orderQuoteType);
      data.orderProgressOptions = setObjectToArray(res.data.orderProgress);
    } else {
      ElMessage.error(res.msg);
    }
  });
};

/**
 * 对象转数组
 * @param {*} obj
 */
const setObjectToArray = (obj) => {
  const arr = [];
  for (const key in obj) {
    arr.push({
      value: key,
      label: obj[key],
    });
  }
  return arr;
};

/**
 * 分页
 */
const handlePaginationChange = (page = 1, limit = 10) => {
  console.log(page, limit);
  data.pageNum = page;
  data.pageSize = limit;
  getList(page, limit);
};

/**
 * 搜索列表
 */
const handleQuery = () => {
  getList();
};

/**
 * 重置搜索条件
 */
const handleReset = () => {
  data.pageNum = 1;
  data.pageSize = 10;
  data.serial = '';
  data.orderReview = null;
  dateRange.value = [];
  getList();
};

/**
 * 下smt订单
 */
const getBill = (row) => {
  router.push({
    path: '/pricing/smt',
    query: {
      bomFileInfor: JSON.stringify(row),
    },
  });
};

const payment = (row) => {
  console.log(row);
  router.push({
    path: 'settlement',
    query: {
      orderId: row.id,
    },
  });
};
</script>
<style lang="scss" scope>
.el-button + .el-button {
  // margin-left: 0px;
  // margin: 5px 0px;
}
.el-date-editor {
  width: 130px !important;
}
.m-r-15 {
  margin-right: 15px;
}
.m-l-15 {
  margin-left: 15px;
}
.m-b-5 {
  margin-bottom: 5px;
}
.solid {
  width: 16px;
  height: 2px;
  border-radius: 2px;
  opacity: 1;
  background: #cccccc;
  margin-right: 16px;
  margin-left: 16px;
}
.inquire {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  margin-top: 10px;
}

.right-align {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
</style>
